<template>
  <div id="app">
    <Meta pagealias="cityinfolist" :query_data="{cityinfo_cid:(params.type_id==0 || params.type_id=='')?params.pid:params.type_id}" />
    <Head>{{selname}}</Head>
    <div :class="isNav ? 'top_box fixed_search' : ''">
      <div class="searchdiv" @click="toggleSearch">
        <img src="../../assets/images/cityinfo/list/list_6.png" />
        <span>请输入关键词</span>
      </div>
      <div class="tab_content">
        <div class="tab_active substring">
          {{selname}}
        </div>
        <div class="tab">
          <div class="btns">
            <div
              class="btn"
              @click="tabdiv(item.id)"
              v-for="(item, index) in menu"
              :key="index"
            >
              <span>{{item.title}}</span>
              <div class="span"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg" v-if="ad_list.length > 0||findmenu.length > 0" >
      <swiper
      class="bannertwo"
      :options="swiperOption"
      v-if="ad_list.length>0 && $store.state.swiperLoaded"
      @click-slide="handleClickSlide"
      >
        <swiper-slide v-for="(item, index) in ad_list" :key="index">
            <img :src="item.imgurl" @click="handlerClick(item)"/>
        </swiper-slide>
      </swiper>
      <div class="finddiv" v-if="findmenu.length > 0">
        <div class="title">精确查找</div>
        <div class="namediv clearfix">
          <div class="name" v-for="(item, index) in findmenu" :key="index" @click="find(item.id)" :class="item.id==params.type_id?'sel':''">
            {{item.title}}
          </div>
        </div>
      </div>
    </div>
    <van-list
      class="list"
      v-model="loading"
      :finished="true"
      :finished-text="finished_text"
      @load="onLoad"
      :immediate-check="false"
      v-if="show_empty != true"
    >
      <ListItem :listData="list"></ListItem>
    </van-list>
    <van-empty
      image="search"
      description="没有找到对应的数据"
      style="background-color:#fff"
      v-if="show_empty === true"
    />
  </div>
</template>
<script>
import Fulltext from './components/fulltext.vue'
import ListItem from './components/ListItem'
import http from '@/utils/http'
import api from '@/api'
export default {
  components: {Fulltext, ListItem},
  data () {
    return {
      swiperOption: {
        loop: true,
        initialSlide: 0,
        pagination: {
          el: '.swiper-pagination',
          renderBullet: function (index, className) {
            return (
              '<span class="' +
              className +
              ' index-app-four-swiper-span"></span>'
            )
          },
          bulletActiveClass: 'index-app-four-swiper-bullet-active'
        },
        speed: 800
      },
      loading: false,
      finished: false,
      finished_text: '',
      page: 1,
      pagesize: 15,
      show_empty: false,
      selname: '',
      params: {
        pid: '',
        type_id: ''
      },
      menu: [], // 头部菜单
      findmenu: [], // 精确查找
      ad_list: [], // 广告
      list: [],
      isNav: false,
      scrollAction: {
        x: 'undefined',
        y: 'undefined'
      },
      scrollDirection: ''
    }
  },
  watch: {
    $route (to, from) {
      this.initQuery()
    }
  },
  created () {
    this.is_personal_login = this.$store.state.LoginOrNot === true && this.$store.state.LoginType === 2
    this.initQuery()
  },
  mounted () {
    window.addEventListener('scroll', () => {
      this.scrollFunc()
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (this.scrollDirection == 'up') {
        if (scrollTop < 100) {
          this.isNav = false
          return false
        }
        this.isNav = true
      }
    })
  },
  destroyed () {
    this.scrollFunc()
    window.removeEventListener('scroll', () => {
      this.scrollFunc()
    })
  },
  methods: {
    initQuery () {
      if (this.$route.params.id && this.$route.params.id != 'null') {
        this.params.pid = this.$route.params.id
      }
      if (this.$route.params.childrenId && this.$route.params.childrenId != 'null') {
        this.params.type_id = this.$route.params.childrenId
      }
      this.getmenu()
    },
    onLoad () {
      this.page++
      this.fetchData(false)
    },
    // 跳列表页搜索
    toggleSearch () {
      this.$router.push('/cityinfo/searchinfolist')
    },
    tabdiv (id) {
      this.$router.push('/cityinfo/infolist/' + id + '/0')
    },
    find (id) {
      this.$router.push('/cityinfo/infolist/' + this.params.pid + '/' + id)
    },
    getmenu () {
      http.get(api.city_selclass)
        .then(res => {
          this.menu = [...res.data]
          this.restructureSortList(res.data)
          if (!this.params.pid) {
            this.params.pid = this.menu[0].id
            this.selname = this.menu[0].title
            this.findmenu = this.menu[0].children
          } else {
            var index = this.menu.findIndex(
              item => parseInt(item.id) === parseInt(this.params.pid)
            )
            this.selname = this.menu[index].title
            this.findmenu = this.menu[index].children
          }
          this.fetchData(true)
        }).catch(() => {})
    },
    // 分类列表数据重构
    restructureSortList (data) {
      data.map(res => {
        res.children.unshift({
          id: 0,
          label: '全部',
          pid: '',
          title: '全部',
          value: 0
        })
      })
    },
    fetchData (init) {
      this.show_empty = false
      let conditions = { ...this.params }
      if (init === true) {
        this.page = 1
        this.finished_text = ''
        this.finished = false
      }
      conditions.page = this.page
      conditions.pagesize = this.pagesize
      this.loading = true
      http
        .get(api.city_list, conditions)
        .then((res) => {
          if (init === true) {
            this.ad_list = [...res.data.ad_list]
            this.list = [...res.data.list]
          } else {
            this.list = this.list.concat(res.data.list)
          }
          // 加载状态结束
          this.loading = false
          // 数据全部加载完成
          if (res.data.list.length < this.pagesize) {
            this.finished = true
            if (init === false) {
              this.finished_text = '没有更多了'
            } else if (res.data.list.length === 0) {
              this.show_empty = true
            }
          }
        })
        .catch(() => {})
    },
    lookall (index) {
      this.list[index].is_all = 1
      this.list = this.list.map(function (item) {
        return item
      })
    },
    handleClickSlide (index, reallyIndex) {
      this.handlerClick(this.ad_list[reallyIndex])
    },
    handlerClick (item) {
      if (item.link_url) {
        window.location.href = item.link_url
      } else if (item.company_id > 0) {
        this.$router.push('/company/' + item.company_id)
      } else if (item.inner_link) {
        let path = ''
        let params_type = 'query'
        switch (item.inner_link) {
          case 'index':
            path = '/cityinfo'
            break
          case 'infoshow':
            path = '/cityinfo/info'
            params_type = 'params'
            break
          default:
            path = ''
            break
        }
        if (path != '') {
          if (item.inner_link_params > 0) {
            if (params_type == 'query') {
              path = path + '?id=' + item.inner_link_params
            } else {
              path = path + '/' + item.inner_link_params
            }
          }
          this.$router.push(path)
        }
      }
    },
    scrollFunc () {
      if (typeof this.scrollAction.x == 'undefined') {
        this.scrollAction.x = window.pageXOffset
        this.scrollAction.y = window.pageYOffset
      }
      var diffX = this.scrollAction.x - window.pageXOffset
      var diffY = this.scrollAction.y - window.pageYOffset
      if (diffX < 0) {
        this.scrollDirection = 'right'
      } else if (diffX > 0) {
        this.scrollDirection = 'left'
      } else if (diffY < 0) {
        this.scrollDirection = 'down'
      } else if (diffY > 0) {
        this.scrollDirection = 'up'
      } else {
      }
      this.scrollAction.x = window.pageXOffset
      this.scrollAction.y = window.pageYOffset
    }
  }
}
</script>
<style lang="scss" scoped>
.fixed_search{
  position: fixed;
  left: 0;
  right: 0;
  top: 53px;
  z-index: 55;
  background:#fff;
}
.searchdiv {
    height: 38px;
    border-radius: 30px;
    margin-top: 15px;
    margin-left: 16px;
    margin-right: 16px;
    padding-left: 12px;
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    display: flex;
    align-items: center;
    img {
      margin-right: 8px;
      width: 15px;
      height: 15px;
    }
    span {
      color: #b4bdc9;
      font-size: 15px;
    }
}
.fixed_nav{
  position: fixed;
  left: 0;
  right: 0;
  top: 105px;
  z-index: 55;
}
.tab_content{
  margin-top: 6px;
  display: flex;
  box-shadow: 0 2px 5px rgba(0,0,0,10%);
  background: #fff;
  .tab_active{
    width: 80px;
    color:#1787fb;
    font-size: 14px;
    height: 53px;
    line-height: 53px;
    text-align: center;
  }
  .tab {
    margin-right: 16px;
    overflow: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    flex: 8;
    &::-webkit-scrollbar{
      display: none;
    }
    .btns{
      white-space: nowrap;
      display: flex;
      .btn {
        height: 53px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #444444;
        position: relative;
        line-height: 1;
        margin-right: 22px;
        &.sel {
          color: #1787fb;
        }
      }
    }
  }
}
.bg{
  background-color: #f8f8f8;
  padding: 10px 16px;
  .bannertwo{
    width: calc(100vw - 32px);
    img {
      border-radius: 5px;
      width: calc(100vw - 32px);
      height: 100px;
    }
  }
  .finddiv{
    margin-top: 3px;
    padding-top: 19px;
    padding-bottom: 19px;
    border-radius: 5px;
    background-color: #ffffff;
    .title{
      margin-left: 19px;
      font-size: 16px;
      color: #181818;
      line-height: 1;
      margin-bottom: 5px;
    }
    .namediv{
      margin-left: 14px;
      .name{
        float: left;
        margin-top: 10px;
        width: calc((100vw - 32px - 14px - 6px - 32px) / 4);
        height: 28px;
        margin-right: 6px;
        border: 1px solid #dfdfdf;
        border-radius: 4px;
        font-size: 12px;
        color: #555555;
        display: flex;
        justify-content: center;
        align-items: center;
        &.sel{
          background-color: #1787fb;
          border: 1px solid #1787fb;
          color: #fff;
        }
      }
    }
  }
}
.list{
    .item{
        padding: 16px 19px 16px 17px;
        border-bottom: 5px solid #f8f8f8;
        .name{
            position: relative;
            font-size: 0px;
            color: #333333;
            position: relative;
            .top{
              position: absolute;
              left: 0;
              top: 0;
              background-color: #ff4949;
              color: #FFFFFF;
              font-size: 10px;
              padding: 2px 5px;
              margin-right: 5px;
              border-radius: 3px;
            }
            .all{
              position: absolute;
              bottom: 0;
              right: 80px;
              z-index: 1;
              cursor: pointer;
              color: #ff4949;
              font-size: 14px;
            }
            .text{
              display: inline-block;
              font-size: 14px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
            }
            .text_indent{
              text-indent: 2.5em;
            }
        }
        .more::after{
            content: "....";
            position: absolute;
            font-size: 14px;
            bottom: 0;
            right: 0;
            padding-right: 120px;
            padding-left: 4px;
            background: linear-gradient(to right, rgba(255,255,255,0),rgba(255,255,255,1) 0%);
        }
        .imgs{
          margin-top: 12px;
          position: relative;
          display: flex;
          .img,img{
            width: 77px;
            height: 55px;
            margin-right: 11px;
          }
          .imgnum{
            width: 77px;
            height: 55px;
            position: absolute;
            font-size: 11px;
            color: #ffffff;
            right: -2px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(0,0,0,0.6);
          }
        }
        .bottom{
          margin-top: 17px;
          position: relative;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #999999;
          .info{
            display: flex;
            align-items: center;
            .label{
              border: 1px solid #1787fb;
              color: #1787fb;
              padding: 1px 3px;
              border-radius: 3px;
            }
            span{
              margin-left: 12px;
            }
          }
          .call{
            width: 81px;
            height: 34px;
            position: absolute;
            right: 0;
            background: url("../../assets/images/cityinfo/index/index_58.png") 0 center no-repeat;
            background-size: 81px 34px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 3px;
            .img{
              height: 15px;
              background: url("../../assets/images/cityinfo/index/index_57.png") 0px center no-repeat;
              background-size: 12px 15px;
              color: #ffffff;
              padding-left: 18px;
              font-size: 13px;
              font-weight: bold;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
    }
}
</style>
